<template lang="html">
	<div class="main">
		<!-- 头部 -->
		<div class="search">
			<img class="logo" src="../assets/img/img.png" alt="" >
			<input v-model="msg" type="text" name="">
			<img class="search" src="../assets/icon/search.png" alt="" >
		</div>
		<!-- 轮播图 -->
		<router-link tag="div" to="/bannerdetails" class="banner" >
	      <div class="swiper-size">
	        <swiper :options="swiperOption">
	          <swiper-slide v-for="(slide, index) in bannerImg" :key="index">
	            <img class="swiperimg" :src="slide" alt="">
	          </swiper-slide>
	          <div class="swiper-pagination" slot="pagination"></div>
	        </swiper>
          </div>	
         <div class="hr"></div>
		</router-link>
        <!-- 每日推荐 -->
        <div class="recommend">
        	<div class="today">
        		<img src="../assets/img/today.png">
        	</div>
        	<router-link class="R-right" tag="div" to="/todayrecommend">
	        	<div class="Rimg">
	        		<img src="../assets/img/todayimg.png">
	        	</div>
	        	<div class="Rdesc">
	        		<p>热门内容 每日推荐</p>
	        		<p class="small-desc">理财小白7分搞懂理财</p>
	        	</div>
	        	<div class="jt">
	        		<img src="../assets/icon/arrow-left.png">
	        	</div>
        	</router-link>
        </div>
       <!-- 导航 -->
        <TypeNav/>
        <keep-alive>
        	<router-view/>
        </keep-alive>
	</div>
</template>
<script>
	import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import TypeNav from "./subpage/typeNav.vue"
	export default{
		name:'index',
		data(){
			return{
				msg:"4AM特训班",
                bannerImg:[
                   require("../assets/img/banner1.png"),
                   require("../assets/img/banner1.png"),
                   require("../assets/img/banner1.png")
                ],
                swiperOption: {
			      pagination: {
			        el: '.swiper-pagination'
			      },
			      loop:true
			      // autoplay:true
			    }
			}
		},
		components:{
		   swiper,
           swiperSlide,
           TypeNav
		}
	}
</script>
<style lang="less">
.main{
	.search{
		height:40px;
		position:relative;
		.logo{
			width:22px;
			height:28px;
			margin: 0 27px 0 27px;
			text-align: center;
		}
		input{
			width:70%;
			height:30px;
			margin-top: 10px;
			background-color: #E7E7E7;
			border-radius: 5px;
			font-size: 12px;
			color:#999;
			text-align: center;
		}
		.search{
			width:20px;
			height:20px;
			position:absolute;
            top:15px;
            left:140px;
            color:#999;
		}
	}
	.banner{
		.swiper-size{
           margin-top: 18px;
		}
		.hr{
			margin-top: 16px;
		    height: 1px;
		    width: 100%;
		    background: #ddd;
		}
    }
    .recommend{
    	padding:10px 18px 10px 18px;
    	box-sizing: border-box;
    	overflow: hidden;
    	.today{
    		width:70px;
    		height:70px;
    		background-color: #2ACEFA;
    		border-radius: 20px;
    		float:left;
    	}
    	.R-right{
    		float:right;
    		width:75%;
    		height:60px;
    		border-left: 1px solid #ddd;
    		.Rimg{
    			float:left;
	    		img{
	    			width:70px;
	    			height:60px;
	    			margin-left: 12px;
	    		}

    	    }
    	    .Rdesc{
    	    	width:60%;
    	    	text-align: left;
    	    	padding:10px 0 10px 5px;
    	    	box-sizing: border-box;
    	    	font-weight: bold;
    	    	float:left;
    	    	p{
    	    		height:23px;
    	    		line-height: 23px;
    	    	}
    	    	.small-desc{
    	    		font-size: 12px;
    	    		color:#999;
    	    	}
    	    }
    	    .jt{
    	    	width:18px;
                float: left;
                margin-top: 20px;
    	    }
    	}
    }
}
	
</style>